{% extends "finance/base.html" %}
{% load static %}

{% block content %}
<style>
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .add-button {
        background-color: rgb(80, 90, 97);
        color: white;
        border: none;
    }

    .add-button:hover {
        background-color: rgb(70, 80, 87);
        color: white;
    }

    .table-container {
        overflow-x: auto;
        margin-top: 1rem;
    }

    .modal-vendordetail {
        width: 80% !important;
        max-width: none;
    }

    .modal-vendordetail .modal-content {
        height: 70vh;
        overflow-y: auto;
    }
</style>

<div class="d-flex justify-content-between align-items-center" style="padding: 1rem;">
    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">Vendor Codes</h2>
    <input type="text" id="searchInput" class="form-control" placeholder="Search Vendor code..."
        style="max-width: 300px; margin-right: 1rem;">
    <div>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#vendorModal"
            onclick="resetForm()">
            Add Vendor Code
        </button>
        <a href="{% url 'generate_pdf_vendor' %}" class="btn btn-secondary">
            Generate PDF Report
        </a>
        <a href="{% url 'export_to_excel_vendor' %}" class="btn btn-success">Export to Excel</a>
    </div>

</div>

<div class="table-container with-bottom-padding">
    <table class="table table-striped table-hover" id="vendorTable">
        <thead class="table-dark">
            <tr>
                <th scope="col" class="align-middle">No</th>
                <th scope="col" class="align-middle">Vendor Code</th>
                <th scope="col" class="align-middle">Name</th>
                <th scope="col" class="align-middle">Address1</th>
                <th scope="col" class="align-middle">Address2</th>
                <th scope="col" class="align-middle">City</th>
                <th scope="col" class="align-middle">Zip Code</th>
                <th scope="col" class="align-middle">Phone</th>
                <th scope="col" class="align-middle">Fax</th>
                <th scope="col" class="align-middle">NPWP</th>
                <th scope="col" class="align-middle">PIC Name</th>
                <th scope="col" class="align-middle">Email</th>
                <th scope="col" class="align-middle">Tax Name</th>
                <th scope="col" class="align-middle">Tax Address</th>
                <th scope="col" class="align-middle">Tax City</th>
                <th scope="col" class="align-middle">Tax NPWP</th>
                <th scope="col" class="align-middle">Detail</th>
                <th scope="col" class="align-middle">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if vendor %}
            {% for vendorcode in vendor %}
            <tr data-id="{{ vendorcode.id }}" data-vendorcode="{{ vendorcode.vendorcode }}"
                data-vendorname="{{ vendorcode.vendorname }}" data-address1="{{ vendorcode.address1 }}"
                data-address2="{{ vendorcode.address2 }}" data-city="{{ vendorcode.city }}"
                data-zipcode="{{ vendorcode.zipcode }}" data-telp="{{ vendorcode.telp }}"
                data-fax="{{ vendorcode.fax }}" data-npwp="{{ vendorcode.npwp }}"
                data-picname="{{ vendorcode.picname }}" data-email="{{ vendorcode.email }}"
                data-taxvendor="{{ vendorcode.taxvendor }}" data-taxaddress="{{ vendorcode.taxaddress }}"
                data-taxcity="{{ vendorcode.taxcity }}" data-taxnpwp="{{ vendorcode.taxnpwp }}">
                <td>{{ forloop.counter }}</td> <!-- Added row number -->
                <td>{{ vendorcode.vendorcode|default_if_none:"" }}</td>
                <td>{{ vendorcode.vendorname|default_if_none:"" }}</td>
                <td>{{ vendorcode.address1|default_if_none:"" }}</td>
                <td>{{ vendorcode.address2|default_if_none:"" }}</td>
                <td>{{ vendorcode.city|default_if_none:"" }}</td>
                <td>{{ vendorcode.zipcode|default_if_none:"" }}</td>
                <td>{{ vendorcode.telp|default_if_none:"" }}</td>
                <td>{{ vendorcode.fax|default_if_none:"" }}</td>
                <td>{{ vendorcode.npwp|default_if_none:"" }}</td>
                <td>{{ vendorcode.picname|default_if_none:"" }}</td>
                <td>{{ vendorcode.email|default_if_none:"" }}</td>
                <td>{{ vendorcode.taxvendor|default_if_none:"" }}</td>
                <td>{{ vendorcode.taxaddress|default_if_none:"" }}</td>
                <td>{{ vendorcode.taxcity|default_if_none:"" }}</td>
                <td>{{ vendorcode.taxnpwp|default_if_none:"" }}</td>
                <td>
                    <button class="btn btn-sm btn-sm border" onclick="detail('{{ vendorcode.vendorcode }}')"
                        title="Lihat detail">
                        <i class="bi bi-file-earmark-text-fill" style="font-size: 1rem;"></i>
                    </button>

                </td>
                <td>
                    <div class="d-flex gap-1">
                        <button type="button" class="btn btn-sm btn-secondary"
                            onclick="editVendor('{{ vendorcode.id }}')">
                            <i class="bi bi-pencil-square"></i>
                        </button>
                        <form method="POST" action="{% url 'delete_vendor' vendorcode.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm btn-danger"
                                onclick="return confirm('Are you sure you want to delete this Vendor Code?')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td colspan="7" class="text-center">No Vendor Code found</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

<script>
    document.getElementById('searchInput').addEventListener('keyup', function () {
        let filter = this.value.toLowerCase();
        let rows = document.querySelectorAll('#vendorTable tbody tr');

        rows.forEach(row => {
            let text = row.textContent.toLowerCase();
            row.style.display = text.includes(filter) ? '' : 'none';
        });
    });

    function detail(vendorcode) {
        // Atur label modal
        document.getElementById('vendordtlModalLabel').innerText = 'Vendor Detail - ' + vendorcode;

        // Tampilkan loading sementara
        document.getElementById('vendordtlContent').innerHTML = '<div class="text-center text-muted">Loading...</div>';


        // Panggil detail dari server
        fetch(`/vendor/detailcode/${vendorcode}/`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Gagal ambil data');
                }
                return response.text();
            })
            .then(html => {
                document.getElementById('vendordtlContent').innerHTML = html;
                const modal = new bootstrap.Modal(document.getElementById('vendordtlModal'));
                modal.show();
            })
            .catch(error => {
                document.getElementById('vendordtlContent').innerHTML = `<div class="text-danger text-center">${error.message}</div>`;
            });
    }

    function editVendor(vendorId) {
        document.getElementById('vendorModalLabel').innerText = 'Edit Vendor Code';
        document.getElementById('vendorForm').action = "{% url 'edit_vendor' 0 %}".replace('0', vendorId);

        const row = document.querySelector(`tr[data-id="${vendorId}"]`);
        if (row) {
            document.getElementById('vendorcode').value = row.dataset.vendorcode;
            document.getElementById('vendorname').value = row.dataset.vendorname;
            document.getElementById('address1').value = row.dataset.address1;
            document.getElementById('address2').value = row.dataset.address2;
            document.getElementById('city').value = row.dataset.city;
            document.getElementById('zipcode').value = row.dataset.zipcode;
            document.getElementById('telp').value = row.dataset.telp;
            document.getElementById('fax').value = row.dataset.fax;
            document.getElementById('npwp').value = row.dataset.npwp;
            document.getElementById('picname').value = row.dataset.picname;
            document.getElementById('email').value = row.dataset.email;
            document.getElementById('taxvendor').value = row.dataset.taxvendor;
            document.getElementById('taxaddress').value = row.dataset.taxaddress;
            document.getElementById('taxcity').value = row.dataset.taxcity;
            document.getElementById('taxnpwp').value = row.dataset.taxnpwp;
        }

        const vendorModal = new bootstrap.Modal(document.getElementById('vendorModal'));
        vendorModal.show();
    }

    function editDtlRow(button) {
        const row = button.closest('tr');
        const form = document.getElementById('vendordtlForm');

        form.action = '/vendor/edit_vendordtl/' + row.dataset.id + '/';
        // form.bankcode.value = row.dataset.bankcode;
        form.branch.value = row.dataset.branch;
        form.bankaddress.value = row.dataset.bankaddress;
        // form.currsign.value = row.dataset.currsign;
        form.accountno.value = row.dataset.accountno;
        form.swiftcode.value = row.dataset.swiftcode;
        form.rema.value = row.dataset.rema;

        document.getElementById('currsign').value = row.dataset.currsign;
        document.getElementById('bankcode').value = row.dataset.bankcode;

    }

    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('vendordtlForm');
        if (form) {
            form.addEventListener('submit', function (e) {
                e.preventDefault(); // Stop normal form submission

                const formData = new FormData(form);
                const actionUrl = form.action;

                fetch(actionUrl, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRFToken': form.querySelector('[name=csrfmiddlewaretoken]').value
                    }
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Gagal menyimpan data');
                        }
                        return response.text(); // Return HTML partial from backend
                    })
                    .then(html => {
                        // Replace modal content (vendordtlContent) with updated HTML
                        document.getElementById('vendordtlContent').innerHTML = html;
                    })
                    .catch(error => {
                        alert("Error: " + error.message);
                    });
            });
        }
    });

</script>

<!-- Modal untuk Detail Vendordtl -->
<div class="modal fade" id="vendordtlModal" tabindex="-1" aria-labelledby="vendordtlModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-vendordetail">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="vendordtlModalLabel">Vendor Detail</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="vendordtlContent">
                <div class="text-center text-muted">Loading...</div>
            </div>
        </div>
    </div>
</div>

<!-- vendor Modal -->
<div class="modal fade" id="vendorModal" tabindex="-1" aria-labelledby="vendorModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="vendorModalLabel">Add Vendor Code</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="vendorForm" method="POST" action="{% url 'save_vendor' %}">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="vendorcode" class="form-label">Vendor Code (auto)</label>
                        <input type="text" class="form-control" id="vendorcode" name="vendorcode" readonly
                            placeholder="Auto generated">
                    </div>
                    <div class="mb-3">
                        <label for="vendorname" class="form-label">Name</label>
                        <input type="text" class="form-control" id="vendorname" name="vendorname" required>
                    </div>

                    <!-- All other fields are optional -->
                    <div class="mb-3">
                        <label for="address1" class="form-label">Address1</label>
                        <input type="text" class="form-control" id="address1" name="address1">
                    </div>
                    <div class="mb-3">
                        <label for="address2" class="form-label">Address2</label>
                        <input type="text" class="form-control" id="address2" name="address2">
                    </div>
                    <div class="mb-3">
                        <label for="city" class="form-label">City</label>
                        <input type="text" class="form-control" id="city" name="city">
                    </div>
                    <div class="mb-3">
                        <label for="zipcode" class="form-label">Zip Code</label>
                        <input type="text" class="form-control" id="zipcode" name="zipcode">
                    </div>
                    <div class="mb-3">
                        <label for="telp" class="form-label">Phone</label>
                        <input type="text" class="form-control" id="telp" name="telp">
                    </div>
                    <div class="mb-3">
                        <label for="fax" class="form-label">Fax</label>
                        <input type="text" class="form-control" id="fax" name="fax">
                    </div>
                    <div class="mb-3">
                        <label for="npwp" class="form-label">NPWP</label>
                        <input type="text" class="form-control" id="npwp" name="npwp">
                    </div>
                    <div class="mb-3">
                        <label for="picname" class="form-label">PIC Name</label>
                        <input type="text" class="form-control" id="picname" name="picname">
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="email" name="email">
                    </div>
                    <div class="mb-3">
                        <label for="taxvendor" class="form-label">Tax Vendor Name</label>
                        <input type="text" class="form-control" id="taxvendor" name="taxvendor">
                    </div>
                    <div class="mb-3">
                        <label for="taxaddress" class="form-label">Tax Address</label>
                        <input type="text" class="form-control" id="taxaddress" name="taxaddress">
                    </div>
                    <div class="mb-3">
                        <label for="taxcity" class="form-label">Tax City</label>
                        <input type="text" class="form-control" id="taxcity" name="taxcity">
                    </div>
                    <div class="mb-3">
                        <label for="taxnpwp" class="form-label">Tax NPWP</label>
                        <input type="text" class="form-control" id="taxnpwp" name="taxnpwp">
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}